<template>
	<view class="app l_pages">
		<jnavbar :title="integralBalance.integral_text + '明细'"></jnavbar>

		<view class="banner" :style="'background:url(' + imgbg + ')'">
			<text>{{ UserInfo.integral }}</text>
			<view class="sign_btn" @click="tointegral">
				<text class="el-sc-riqi3"></text>
				<text>积分明细</text>
			</view>
			<text>当前账户{{ integralBalance.integral_text }}</text>
			
		</view>
		<me-tabs v-model="current" :tabs="tablist" :tab-width="130"></me-tabs>
		<!-- <u-gap height="20" bg-color="#F5F5F5"></u-gap> -->
		<swiper class="swiper-box" :current="current" @change="swiperChange">
			<swiper-item v-for="(tab, i) in tablist" :key="i"><ListItem ref="mescrollItem" :i="i" :index="current" :tabs="tablist" :height="height"></ListItem></swiper-item>
		</swiper>
		<trolley></trolley>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
		<nloading></nloading>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
import ListItem from './goodsitem.vue';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			page: 1,
			size: 10,
			list: [],
			background: {
				backgroundImage: 'linear-gradient(180deg, #fb4545, #fc4b41)'
			},
			imgbg: '',
			height:0,
			typelist: [
				{
					type: 1,
					value: '+'
				},
				{
					type: 2,
					value: '-'
				},
				{
					type: 3,
					value: '+'
				},
				{
					type: 4,
					value: '+'
				},
				{
					type: 5,
					value: '-'
				},
				{
					type: 6,
					value: '+'
				},
				{
					type: 7,
					value: '+'
				}
				// 1-订单获得 2-下单消费 3-分享获得 4-后台添加 5-后台减少
			],
			integralBalance: {},
			tablist: [
				
			],
			current:0
		};
	},
	components:{
		ListItem
	},
	async onLoad() {
		await this.$getWx
		// #ifndef MP-WEIXIN
		this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(373) + 'px';
		// #endif
		
		// #ifdef MP-WEIXIN
		this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(570) + 'px';
		// #endif
		this.imgbg = util.getimgurl('static/images/banner_scroe.png', '1');
		let _this = this;
		this.getjuris('integralBalance').then(a => {
			_this.integralBalance = a;
		});
		this.getclass()
		// this.getlist();
	},
	onShow() {
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
	},
	computed: {
		...mapState({
			UserInfo: state => state.userInfo
		})
	},
	onPullDownRefresh() {
		this.userCenter();
	},
	methods: {
		swiperChange(e) {
			this.current = e.detail.current
		},
		tointegral(){
			this.Jumpurl({
				type: 1,
				link: '/pages/mine/integral/integral'
			},
			'redirect');
		},
		getclass(){
			
			this.$http('/integral/shop/class',{},'GET').then(res=>{
				let list=res.data.msg;
				let tablist=[]
				list.forEach(a=>{
					tablist.push({
					name: a.name,
					id:a.id,
					list: [],
					page: 1,				
				})
				})
				this.tablist=tablist
			})
		},
		logincallback() {},
		userCenter() {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				uni.stopPullDownRefresh();
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		},
		getlist() {
			this.changeloading({loading: true});
			this.$http('/integral/list', {page: this.page, size: this.size}, 'POST').then(res => {
				uni.stopPullDownRefresh();
				this.changeloading({loading: false});
				if (res.statusCode == 200) {
					let list = res.data.msg.data;
					if (list.length > 0) {
						this.list = this.list.concat(list);
						this.page++;
					} else {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	position: relative;
}
.swiper-box{
	/* #ifdef MP-WEIXIN */
	height: calc(100vh - 570rpx);
	/* #endif */
	/* #ifndef MP-WEIXIN */
	height: calc(100vh - 373rpx);
	/* #endif */
}
.list {
	// margin-top: 20rpx;
	.item {
		background: #fff;
		width: 720rpx;
		margin-left: 15rpx;
		padding: 0 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		height: 138rpx;
		.icon_box {
			width: 78rpx;
			height: 78rpx;
			background-color: #19be6b;
			margin-right: 23rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 78rpx;
			text {
				color: #ffffff;
				font-size: 30rpx;
			}
			&.add {
				background-color: #ff3c29;
			}
		}
		.content {
			height: 78rpx;
			justify-content: space-between;
			text:first-child {
				font-size: 30rpx;
				color: #000000;
			}
			text:last-child {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			&.jian {
				color: #19be6b;
			}
		}
	}
}
.banner {
	width: 750rpx;
	height: 293rpx;
	// background: url(https://jzwl365.oss-cn-beijing.aliyuncs.com/static/images/banner_scroe.png);
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	// position: absolute;
	// top: 0;
	// z-index: 5;
	// margin: 0 24rpx;
}

.banner >text:first-child {
	font-size: 72rpx;
	font-family: SanFranciscoDisplay-Medium;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 72rpx;
	margin-top: 75rpx;
}

.banner >text:last-child {
	font-size: 28rpx;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	margin-top: 26rpx;
}
	.sign_btn {
		position: absolute;
		top: 70rpx;
		right: 0;
		width: 222rpx;
		height: 70rpx;
		background: #eb4521;
		border-radius: 34rpx 0px 0px 34rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #ffffff;
		z-index: 100;
		.el-sc-riqi3 {
			margin: 0 12rpx 0 18rpx;
		}
	}
</style>
